import React, { Component } from 'react';

const TweenMax = window.TweenMax;
let animation;
class Stagger extends Component {
  componentDidMount() {
    animation = TweenMax.staggerFrom('.menu li', 2, {scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut}, 0.2);
    animation.forEach((item) => {
      item.pause();
    });
  }
  
  playAnimation = () => {
    animation.forEach((item) => {
      item.play();
    });
  }

  render() {
    return (
      <div>
        <div><code>{`TweenMax.staggerFrom('.menu li', 2, {scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut}, 0.2);`}</code></div>
        <ul className="menu" style={{ marginTop: 20 }}>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
        <div className="btns">
          <button className="btn" onClick={this.playAnimation}>play</button>
        </div>
        <div style={{ marginTop: 20 }}>
          高级方法<code>cycle</code>，可以设置多个属性值，具体的操作可以官网的<a href="https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/" target="_bank">示例和视频</a>
        </div>
      </div>
    );
  }
}

export default Stagger;